import ReactECharts from 'echarts-for-react';
import { useEffect, useRef } from 'react';
const EchartTest = ({
  data = [
    {
      name: '',
      value: 5,
      isIncress: true,
      percent: 10,
    },
    {
      name: '',
      value: 20,
      isIncress: true,
      percent: 10,
    },
    {
      name: '',
      value: 36,
      isIncress: false,
      percent: 20,
    },
    {
      name: '',
      value: 10,
      isIncress: true,
      percent: 50,
    },
    {
      name: '',
      value: 10,
      isIncress: false,
      percent: 10,
    },
    {
      name: '',
      value: 20,
      isIncress: false,
      percent: 13,
    },
    {
      name: '',
      value: 4,
      isIncress: true,
      percent: 10,
    },
  ],
}) => {
  const echartRef = useRef(null);
  const option = {
    tooltip: {},
    legend: {},
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {},
    series: [
      {
        name: 'Sale',
        type: 'bar',
        data,
        label: {
          show: true,
          formatter: function (params) {
            if (params.data.isIncress) {
              return `{c|↓}{a|${params.data.percent}%}`;
            } else {
              return `{d|↑}{b|${params.data.percent}%}`;
            }
          },
          rich: {
            a: {
              color: 'red',
            },
            b: {
              color: 'green',
            },
            c: {
              fontSize: '15px',
              color: 'red',
            },
            d: {
              fontSize: '15px',
              color: 'green',
            },
          },
          position: 'top',
        },
      },
    ],
  };

  const onChartReady = (chart) => {
    console.log('chart', chart);
    loop(chart, 7, 2000);
  };
  let timer = null;
  const loop = (echart, len, time = 2000) => {
    let seriesIndex = 0;
    if (!echart?.dispatchAction) return;
    const reset = (echart, len) => {
      for (let i = 0; i < len; i++) {
        if (echart) {
          echart?.dispatchAction({
            type: 'downplay',
            seriesIndex,
            dataIndex: i,
          });
          echart?.dispatchAction({
            type: 'hideTip',
            seriesIndex,
            dataIndex: i,
          });
        }
      }
    };
    const show = (echart, len) => {
      echart?.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0,
      });
      echart?.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0,
      });
    };
    setTimeout(() => {
      reset(echart, len);
      show(echart);
    }, 300);
    let currentIndex = 1;
    timer = setInterval(() => {
      if (echart) {
        console.log('echart', echart);
        echart?.dispatchAction({
          type: 'highlight',
          seriesIndex,
          dataIndex: currentIndex >= len ? 0 : currentIndex,
        });
        echart?.dispatchAction({
          type: 'showTip',
          seriesIndex,
          dataIndex: currentIndex >= len ? 0 : currentIndex,
        });
        // console.log(currentIndex, len - 1)
        currentIndex++;
        if (currentIndex >= len) {
          console.log('循环到底');
          currentIndex = 0;
        }
      }
    }, time);
  };
  const onEvents = {
    mouseover: () => {
      timer = null;
      clearInterval(timer);
    },
    mouseout: () => {
      loop(echartRef.current, 7, 2000);
    },
  };
  useEffect(() => {
    return () => {
      clearInterval(timer);
      timer = null;
      echartRef.current = null;
    };
  }, []);
  return (
    <ReactECharts
      ref={(e) => {
        echartRef.current = e;
      }}
      onChartReady={onChartReady}
      option={option}
      notMerge={true}
      lazyUpdate={true}
      theme={'theme_name'}
      // showLoading={true}
      onEvents={onEvents}
    />
  );
};
export default EchartTest;
